﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width" />
    <title>设备信息管理</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <script src="../Content/scripts/jquery-1.11.1.min.js"></script>
    <link href="../Content/styles/font-awesome.min.css" rel="stylesheet" />
    <link href="../Content/scripts/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
    <script src="../Content/scripts/plugins/jquery-ui/jquery-ui.min.js"></script>
    <link href="../Content/scripts/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <script src="../Content/scripts/bootstrap/bootstrap.min.js"></script>
    <link href="../Content/scripts/plugins/jqgrid/jqgrid.css" rel="stylesheet" />
    <link href="../Content/styles/learun-ui.css" rel="stylesheet" />
    <script src="../Content/scripts/plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../Content/scripts/plugins/jqgrid/jqgrid.min.js"></script>
    <script src="../Content/scripts/plugins/tree/tree.js"></script>
    <script src="../Content/scripts/plugins/validator/validator.js"></script>
    <script src="../Content/scripts/utils/learun-ui.js"></script>
    <script src="../Content/scripts/utils/learun-form.js"></script>
    <script src="EquInfoJS.js"></script>
    <style type="text/css">
        body {
            margin: 10px;
            margin-bottom: 0px;
        }

        .ui-jqgrid tr.ui-row-ltr td {
            border-right: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="titlePanel">
        <div class="title-search">
            <table>
                <tr>
                    <td style="padding-left: 5px;">
                        <input id="txt_Keyword" type="text" class="form-control" placeholder="请输入要查询关键字" style="width: 200px;" />
                    </td>
                    <td style="padding-left: 5px;">
                        <a id="btn_Search" class="btn btn-primary"><i class="fa fa-search"></i>&nbsp;查询</a>
                    </td>
                </tr>
            </table>
        </div>
        <div class="toolbar">

            <div class="btn-group">
                <a id="lr-add" class="btn btn-default" onclick="btn_add()"><i class="fa fa-plus"></i>&nbsp;新增</a>
                <a id="lr-edit" class="btn btn-default" onclick="btn_edit(event)"><i class="fa fa-pencil-square-o"></i>&nbsp;编辑</a>
                <!--<a id="lr-search" class="btn btn-default" onclick="btn_search(event)"><i class="fa fa-eye"></i>&nbsp;查看</a>-->
                <a id="lr-delete" class="btn btn-default" onclick="btn_delete(event)"><i class="fa fa-trash-o"></i>&nbsp;删除</a>

            </div>
        </div>
    </div>
    <div class="gridPanel">
        <table id="gridTable"></table>
        <div id="gridPager"></div>
    </div>

    <script type="text/javascript">

        $(window).resize(function (e) {
            window.setTimeout(function () {
                $('#gridTable').setGridWidth(($('.gridPanel').width()));
                $("#gridTable").setGridHeight($(window).height() - 136.5);
            }, 200);
            e.stopPropagation();
        });

        //加载表格
        var selectedRowIndex = 0;
        var $gridTable = $('#gridTable');
        $gridTable.jqGrid({
            url: "./EquInfo.ashx",
            postData: {
                Action: "GetEquTypeInfo",
                keyword: $("#txt_Keyword").val(),
                EquIndex: 1
            },
            datatype: "json",
            height: $(window).height() - 136.5,
            //loadonce: true,
            autowidth: true,
            //jsonReader: {
            //    root: 'list',
            //    page: 'pageNumber',
            //    total: 'pageSize',
            //    records: 'totalCount',
            //    cell: "mylist"
            //},
            colModel: [
                { label: '主键', name: 'ID', hidden: true },
                { label: '设备类型主键', name: 'FeatureID', hidden: true },
                {
                    label: '粗纱机类型', name: 'EquTypeName', index: 'EquTypeName', width: 200, align: 'center',
                    cellattr: function (rowId, tv, rawObject, cm, rdata) {
                        //合并单元格
                        return 'id=\'EquTypeName' + rowId + "\'";
                    }
                },
                {
                    label: '描述', name: 'EquTypeRemark', index: 'EquTypeRemark', width: 400, align: 'left',
                    cellattr: function (rowId, tv, rawObject, cm, rdata) {
                        //合并单元格
                        return 'id=\'EquTypeRemark' + rowId + "\'";
                    }
                },
                {
                    label: '特性类型', name: 'EquTypeFeatures', index: 'EquTypeFeatures', width: 200, align: 'left',
                    cellattr: function (rowId, tv, rawObject, cm, rdata) {
                        //合并单元格
                        return 'id=\'EquTypeFeatures' + rowId + "\'";
                    }
                },
                { label: '特性名称', name: 'FeaturesContent', index: 'FeaturesContent', width: 300, align: 'left' },
                { label: '维护周期(天)', name: 'MaintenanceCycle', index: 'MaintenanceCycle', width: 200, align: 'left' },
                { label: '变更铭牌号', name: 'ChangeEquNo', index: 'ChangeEquNo', width: 100, align: 'left' },
            ],
            viewrecords: true,
            rowNum: 30,
            rowList: [30, 50, 100],
            sortname: 'ID',
            sortable: true,
            pager: "#gridPager",
            rownumbers: true,
            shrinkToFit: false,
            gridview: true,
            onSelectRow: function () {
                selectedRowIndex = $("#" + this.id).getGridParam('selrow');
            },
            gridComplete: function () {
                //$("#" + this.id).setSelection(selectedRowIndex, false);
                //②在gridComplete调用合并方法
                var gridName = "gridTable";
                Merger(gridName, 'EquTypeName');
                //Merger(gridName, 'EquTypeRemark');
                //Merger(gridName, 'EquTypeFeatures');
            }
        });

        //公共调用方法
        function Merger(gridName, CellName) {
            //得到显示到界面的id集合
            var mya = $("#" + gridName + "").getDataIDs();
            //当前显示多少条
            var length = mya.length;
            for (var i = 0; i < length; i++) {
                //从上到下获取一条信息
                var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);
                //定义合并行数
                var rowSpanTaxCount = 1;
                for (j = i + 1; j <= length; j++) {
                    //和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏
                    var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]);
                    if (before[CellName] == end[CellName]) {
                        rowSpanTaxCount++;
                        $("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' });
                    } else {
                        rowSpanTaxCount = 1;
                        break;
                    }
                    $("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
                }
            }
        }


        //查询事件
        $("#btn_Search").click(function () {

            $gridTable.jqGrid('setGridParam', {
                postData: {
                    Action: "GetCuShaInfo",
                    keyword: $("#txt_Keyword").val()
                },
            }).trigger('reloadGrid');

        });

        //查询回车
        $('#txt_Keyword').bind('keypress', function (event) {
            if (event.keyCode == "13") {
                $('#btn_Search').trigger("click");
            }
        });


        //新增设备信息
        function btn_add(event) {
            dialogOpen({
                id: "Form",
                title: '新增粗纱机类型',
                url: '../Equipment/CuShaAdd.html',
                width: "800px",
                height: "520px",
                callBack: function (iframeId) {
                    top.frames[iframeId].AcceptClick($('#gridTable'));
                },
                cancel: function () {
                    $.equinfojs.deleteuntypefeature();
                }
            });
        }

        //编辑粗纱类型
        function btn_edit(event) {
            var keyValue = $("#gridTable").jqGridRowValue("ID");
            var FeatureID = $("#gridTable").jqGridRowValue("FeatureID");
            if (checkedRow(keyValue)) {

                dialogOpen({
                    id: "Form",
                    title: '编辑粗纱机类型',
                    url: '../Equipment/CuShaEdit.html?FeatureID=' + FeatureID + '&CushaID=' + keyValue,
                    width: "500px",
                    height: "520px",
                    callBack: function (iframeId) {
                        top.frames[iframeId].AcceptClick($('#gridTable'));
                    }
                });
            }
        }

        //删除粗纱类型信息
        function btn_delete(event) {

            var keyValue = $("#gridTable").jqGridRowValue("ID");
            var FeatureID = $("#gridTable").jqGridRowValue("FeatureID");

            if (keyValue) {
                dialogConfirm("注：您确定要删除吗？该操作将无法恢复", function (r) {
                    if (r) {
                        Loading(true, "正在删除数据...");

                        window.setTimeout(function () {
                            $.equinfojs.deleteEquTypeInfo(keyValue, FeatureID, $('#gridTable'));
                        }, 500);
                    }
                });
            }
        }
    </script>
</body>
</html>

